<template>
	<view style="padding: 22rpx 30rpx;">
		<view>
			<view v-for="items in knowBase" :key="items.index" class="items">
				<view class="title" @click="handleList(items)" :show="items.show">
					<!-- <text class="uni-icon" v-if="items.children && items.children.length">&#xe581;</text> -->
					<!-- <text class="icon" v-else>&gt;&gt;</text> -->
					<view class="text1">
						<text style="float: left;">第{{items.index}}类：</text>
						<text class="text1_text">{{items.title}}</text>
					</view>
					<u-icon v-if="listNum.includes(items.index)" name="arrow-right" color="#007AFF" size="15"
						style='display: inline-block;'></u-icon>
					<image v-show="items.children && items.children.length && !items.show" class="item_img"
						src="/static/image/know_up.png" mode=""></image>
					<image v-show="items.children && items.children.length && items.show" class="item_img"
							src="/static/image/know_down.png" mode=""></image>
				</view>
				<view v-if="items.children && items.children.length" class="children" v-show="items.show">
					<view class="content">
						<view v-for="item in items.children" :key="item.index" class="item"
							@click="$goBack('./dangerous-know/list?type='+item.index)">
							<!-- <text class="icon">&gt;&gt;</text> -->
							<text class="item_title">{{item.index}} {{item.title}}</text>
							<u-icon name="arrow-right" color="#000000" size="15" style='display: inline-block;'>
							</u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				knowBase: [{
						index: "1",
						title: "爆炸品",
						show: true,
						children: [{
								index: "1.1",
								title: "有整体爆炸危险的物质和物品",
							},
							{
								index: "1.2",
								title: "有迸射危险，但无整体爆炸危险的物质和物品",
							},
							{
								index: "1.3",
								title: "有爆炸危险并有局部爆炸危险或局部迸射危险之一，或兼有这两种危险，但无整体爆炸危险的物质和物品",
							},
							{
								index: "1.4",
								title: "不呈现重大危险的物质和物品",
							},
							{
								index: "1.5",
								title: "有整体爆炸危险的非常不敏感物质",
							},
							{
								index: "1.6",
								title: "无整体爆炸危险的极端不敏感物品",
							},
						],
					},
					{
						index: "2",
						title: "气体",
						show: true,
						children: [{
								index: "2.1",
								title: "易燃气体",
							},
							{
								index: "2.2",
								title: "非易燃无毒气体",
							},
							{
								index: "2.3",
								title: "毒性气体",
							},
						],
					},
					{
						index: "3",
						title: "易燃液体",
						show: true,
					},
					{
						index: "4",
						title: "易燃固体、易于自燃的物质、遇水放出易燃气体的物质",
						show: true,
						children: [{
								index: "4.1",
								title: "易燃固体、自反应物质和固态退敏爆炸品",
							},
							{
								index: "4.2",
								title: "易于自燃的物质",
							},
							{
								index: "4.3",
								title: "遇水放出易燃气体的物质",
							},
						],
					},
					{
						index: "5",
						title: "氧化性物质和有机过氧化物",
						show: true,
						children: [{
								index: "5.1",
								title: "氧化性物质",
							},
							{
								index: "5.2",
								title: "有机过氧化物",
							},
						],
					},
					{
						index: "6",
						title: "毒性物质和感染性物质",
						show: true,
						children: [{
								index: "6.1",
								title: "毒性物质",
							},
							{
								index: "6.2",
								title: "感染性物质",
							},
						],
					},
					{
						index: "7",
						title: "放射性物质",
						show: true,
					},
					{
						index: "8",
						title: "腐蚀性物质",
						show: true,
					},
					{
						index: "9",
						title: "杂项危险物质和物品，包括危害环境的物质",
						show: true,
					},
				],
				listNum: ['3', '7', '8', '9'],
			}
		},
		methods: {
			handleList(items) {
				if (items.children && items.children.length) {
					items.show = !items.show;
				} else {
					this.$goBack('./dangerous-know/list?type=' + items.index);
				}
			}
		}
	}
</script>

<style lang="scss">
	.items {
		// box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
		// border: 1rpx solid rgba(0, 0, 0, 0.16);
		border-radius: 10rpx;
		// margin-bottom: 22rpx;

		.title {
			width: 90%;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			padding: 20rpx 30rpx;
			background: rgba(32,132,255,0.04);
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 2rpx solid #2084FF;
			border-radius: 10rpx;
			margin: 0 0 10rpx 0;

			.text1 {
				width: 92%;
				display: inline-block;
				color: #2084FF;

				.text1_text {
					width: 80%;
					float: left;
					display: inline-block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.uni-icon {
				float: right;
				background-color: #007AFF;
				color: #000;
				font-size: 28rpx;
				width: 35rpx;
				height: 25rpx;
				line-height: 25rpx;
				margin-top: 7rpx;
				text-align: center;
				border-radius: 6rpx;
			}

			&[show] {
				.uni-icon {
					transform: rotate(180deg);
				}
			}

			.icon {
				float: right;
			}

			.item_img {
				width: 48rpx;
				height: 36rpx;

				display: inline-block;
			}
		}

		.children {
			// border-top: 1rpx solid #eee;
			position: relative;
			z-index: 999;

			.content {
				padding: 6rpx 0;
			}

			.item {
				line-height: 36rpx;
				padding: 18rpx 30rpx;
				color: #333333;
				font-size: 28rpx;

				background: #F6F7F9;
				margin: 15rpx 0;
				border-radius: 10rpx;

				.icon {
					float: right;
					color: #BF9E3E;
				}

				.item_title {
					width: 92%;
					display: inline-block;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 0 15rpx 0 0;
				}
			}
		}
	}
</style>
